<template>
  <div>
    <div class="mainContent">
      <div class="total">
        <div class="totalTop baseTotal">
          <titleBox>
            <span slot="time">总</span>
            <span slot="unfinished">今日需维护总数 : {{todaymaintain}}</span>
            <span slot="finished">今日已完成总数 : {{todaymaintained}}</span>
          </titleBox>
          <title-text><span slot="title">近一周总维护</span></title-text>
          <div
            id="barBox"
            class="barBox"
          ></div>
        </div>
        <div class="totalBottom baseTotal">
          <title-text>
            <span slot="title">近一周维护列表</span>
          </title-text>
          <div class="tableBox">
            <el-table
              :row-style="rowStyle"
              :header-cell-style="headStyle"
              :cell-style="cellStyle"
              :data="tableData"
              :size="small"
              :fit="fit"
              :highlight-current-row=true
            >
              <el-table-column
                prop="eName"
                label="仪器名称"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="total"
                label="维护总数"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="w"
                label="周维护数"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="m"
                label="月维护数"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="q"
                label="季维护数"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="week baseBox">
        <div class="TopContents">
          <titleBox>
            <span slot="time">周</span>
            <span slot="unfinished">今日需周维护总数 : {{weekMaitain}}</span>
            <span slot="finished">已完成周维护总数 : {{weekMaitained}}</span>
          </titleBox>
          <title-text><span slot="title">仪器周维护</span></title-text>
          <div
            id="lineBoxWeek"
            class="lineBaseBox"
          ></div>
        </div>
        <div class="bottomContents">
          <title-text><span slot="title">大区周维护</span></title-text>
          <div
            id="barBoxWeek"
            class="barBaseBox"
          ></div>
          <div
            id="pieBoxWeek"
            class="pieBaseBox"
          ></div>
        </div>
      </div>
      <div class="month baseBox">
        <div class="TopContents">
          <titleBox>
            <span slot="time">月</span>
            <span slot="unfinished">今日需月维护总数 : {{monthMaintain}}</span>
            <span slot="finished">已完成月维护总数 : {{monthMaintained}}</span>
          </titleBox>
          <title-text><span slot="title">仪器月维护</span></title-text>
          <div
            id="lineBoxMonth"
            class="lineBaseBox"
          ></div>
        </div>
        <div class="bottomContents">
          <title-text><span slot="title">大区月维护</span></title-text>
          <div
            id="barBoxMonth"
            class="barBaseBox"
          ></div>
          <div
            id="pieBoxMonth"
            class="pieBaseBox"
          ></div>
        </div>
      </div>
      <div class="season baseBox">
        <div class="TopContents">
          <titleBox>
            <span slot="time">季</span>
            <span slot="unfinished">今日需季维护总数 : {{seasonMaintain}}</span>
            <span slot="finished">已完成季维护总数 : {{seasonMaintained}}</span>
          </titleBox>
          <title-text><span slot="title">仪器季维护</span></title-text>
          <div
            id="lineBoxSeason"
            class="lineBaseBox"
          ></div>

        </div>
        <div class="bottomContents">
          <title-text><span slot="title">大区季维护</span></title-text>
          <div
            id="barBoxSeason"
            class="barBaseBox"
          ></div>
          <div
            id="pieBoxSeason"
            class="pieBaseBox"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mtnBaseTotal } from "@/request/api.js";
import { weekTotalMaintain } from "@/request/api.js";
import { weekMaintainList } from "@/request/api.js";
import { instrumentMaintain } from "@/request/api.js";
import { regionMaintain } from "@/request/api.js";
import { unfinishedCity } from "@/request/api.js";

import titleBox from "@/components/MaintainChart/titleBox";
import titleText from "@/components/title.vue";
import tellgenChart from "@/assets/tellgenChart";
import "@/assets/base/echartsBaseStyle.css";
export default {
  name: "Home",
  components: {
    titleBox,
    titleText,
  },
  data() {
    return {
      small: "small",
      fit: true,
      // headStyle: { backgroundColor: "#131428", color: "#FFFFFF" },
      headStyle: {
        height: "5rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        fontSize: "1.4rem",
      },
      cellStyle: {
        height: "5rem",
        fontSize: "1.4rem",
      },
      tableData: [],
      weekTotalMtnData: [],
      weekTotalMtnType: [],
      todaymaintain: "",
      todaymaintained: "",
      weekMaitain: "",
      weekMaitained: "",
      monthMaintain: "",
      monthMaintained: "",
      seasonMaintain: "",
      seasonMaintained: "",

      weekAreaType: [],
      weekFinishData: [],
      weekUnfinishData: [],
      monthAreaType: [],
      monthFinishData: [],
      monthUnfinishData: [],
      quarterAreaType: [],
      quarterFinishData: [],
      quarterUnfinishData: [],

      weekUnfinishCity: [],
      monthUnfinishCity: [],
      quarterUnfinishCity: [],

      timeScope: [],
      typeScope: [],
      insMtnData: [],
      monthTimeScope: [],
      monthInsMtnData: [],
      monthTypeScope: [],
      quarterTimeScope: [],
      quarterInsMtnData: [],
      quarterTypeScope: [],
    };
  },
  created() {
    this.mtnBaseTotal();
    this.weekTotalMaintain();
    this.weekMaintainList();
    this.instrumentMaintain("W");
    this.instrumentMaintain("M");
    this.instrumentMaintain("Q");
    this.regionMaintain("W");
    this.regionMaintain("M");
    this.regionMaintain("Q");
    this.unfinishedCity("W");
    this.unfinishedCity("M");
    this.unfinishedCity("Q");
  },
  mounted() {
    // this.showBarChart(); 
    // this.showLineWeek();
    // this.showLineMonth();
    // this.showLineSeason();
    // this.showBarBoxWeek();
    // this.showBarBoxMonth();
    // this.showBarBoxSeason();
    // this.showPieWeek();
    // this.showPieMonth();
    // this.showPieSeason();
  },
  methods: {
    // 周月季总维护/完成总数接口
    mtnBaseTotal() {
      mtnBaseTotal()
        .then((res) => {
          console.log("基础维护/完成总数成功", res);
          if (res.data.success) {
            this.todaymaintain = res.data.rows[0].total;
            this.todaymaintained = res.data.rows[1].total;
            this.weekMaitain = res.data.rows[2].total;
            this.weekMaitained = res.data.rows[3].total;
            this.monthMaintain = res.data.rows[4].total;
            this.monthMaintained = res.data.rows[5].total;
            this.seasonMaintain = res.data.rows[6].total;
            this.seasonMaintained = res.data.rows[7].total;
          }
        })
        .catch((err) => {
          console.log("基础维护/完成总数失败", err);
        });
    },
    //近一周总维护接口
    weekTotalMaintain() {
      weekTotalMaintain()
        .then((res) => {
          console.log("近一周总维护成功", res.data);
          this.weekTotalMtnData = res.data.Total;
          this.weekTotalMtnType = res.data.Type;
          this.showBarChart();
        })
        .catch((err) => {
          console.log("近一周总维护失败", err);
        });
    },
    //近一周维护列表接口
    weekMaintainList() {
      weekMaintainList()
        .then((res) => {
          console.log("近一周维护列表成功", res);
          if (res.data.success) {
            this.tableData = res.data.rows;
          }
        })
        .catch((err) => {
          console.log("近一周维护列表成功", err);
        });
    },
    //仪器周、月、季维护接口
    instrumentMaintain(types) {
      instrumentMaintain({
        type: types,
      })
        .then((res) => {
          console.log("仪器维护接口成功", res);
          switch (types) {
            case "W":
              var wTemp = res.data.rows;
              var wF3999 = [];
              var wF4000 = [];
              var wS6500 = [];
              var wi100 = [];
              for (var i = 0; i < wTemp.length; i++) {
                if (this.timeScope.indexOf(wTemp[i].date) == -1) {
                  this.timeScope.push(wTemp[i].date);
                }
                if (this.typeScope.indexOf(wTemp[i].type) == -1) {
                  this.typeScope.push(wTemp[i].type);
                  var tempObject = {};
                  tempObject.types = wTemp[i].type;
                  this.insMtnData.push(tempObject);
                }
                switch (wTemp[i].type) {
                  case "F3999":
                    wF3999.push(wTemp[i].total);
                    break;
                  case "F4000":
                    wF4000.push(wTemp[i].total);
                    break;
                  case "S6500":
                    wS6500.push(wTemp[i].total);
                    break;
                  case "i100":
                    wi100.push(wTemp[i].total);
                    break;
                }
              }
              for (var i = 0; i < this.insMtnData.length; i++) {
                switch (this.insMtnData[i].types) {
                  case "F3999":
                    this.insMtnData[i].datas = wF3999;
                    break;
                  case "F4000":
                    this.insMtnData[i].datas = wF4000;
                    break;
                  case "S6500":
                    this.insMtnData[i].datas = wS6500;
                    break;
                  case "i100":
                    this.insMtnData[i].datas = wi100;
                    break;
                }
              }
              console.log(this.insMtnData);
              console.log(this.timeScope);
              console.log(this.typeScope);

              this.showLineWeek();
              break;
            case "M":
              var mTemp = res.data.rows;
              var mF3999 = [];
              var mF4000 = [];
              var mS6500 = [];
              var mi100 = [];
              for (var i = 0; i < mTemp.length; i++) {
                if (this.monthTimeScope.indexOf(mTemp[i].date) == -1) {
                  this.monthTimeScope.push(mTemp[i].date);
                }
                if (this.monthTypeScope.indexOf(mTemp[i].type) == -1) {
                  this.monthTypeScope.push(mTemp[i].type);
                  var tempObject = {};
                  tempObject.types = mTemp[i].type;
                  this.monthInsMtnData.push(tempObject);
                }
                switch (mTemp[i].type) {
                  case "F3999":
                    mF3999.push(mTemp[i].total);
                    break;
                  case "F4000":
                    mF4000.push(mTemp[i].total);
                    break;
                  case "S6500":
                    mS6500.push(mTemp[i].total);
                    break;
                  case "i100":
                    mi100.push(mTemp[i].total);
                    break;
                }
              }
              for (var i = 0; i < this.monthInsMtnData.length; i++) {
                switch (this.monthInsMtnData[i].types) {
                  case "F3999":
                    this.monthInsMtnData[i].datas = mF3999;
                    break;
                  case "F4000":
                    this.monthInsMtnData[i].datas = mF4000;
                    break;
                  case "S6500":
                    this.monthInsMtnData[i].datas = mS6500;
                    break;
                  case "i100":
                    this.monthInsMtnData[i].datas = mi100;
                    break;
                }
              }
              console.log(this.monthInsMtnData);
              console.log(this.monthTimeScope);
              console.log(this.monthTypeScope);
              this.showLineMonth();
              break;
            case "Q":
              var qTemp = res.data.rows;
              var qF3999 = [];
              var qF4000 = [];
              var qS6500 = [];
              var qi100 = [];
              for (var i = 0; i < qTemp.length; i++) {
                if (this.quarterTimeScope.indexOf(qTemp[i].date) == -1) {
                  this.quarterTimeScope.push(qTemp[i].date);
                }
                if (this.quarterTypeScope.indexOf(qTemp[i].type) == -1) {
                  this.quarterTypeScope.push(qTemp[i].type);
                  var tempObject = {};
                  tempObject.types = qTemp[i].type;
                  this.quarterInsMtnData.push(tempObject);
                }
                switch (qTemp[i].type) {
                  case "F3999":
                    qF3999.push(qTemp[i].total);
                    break;
                  case "F4000":
                    qF4000.push(qTemp[i].total);
                    break;
                  case "S6500":
                    qS6500.push(qTemp[i].total);
                    break;
                  case "i100":
                    qi100.push(qTemp[i].total);
                    break;
                }
              }
              for (var i = 0; i < this.quarterInsMtnData.length; i++) {
                switch (this.quarterInsMtnData[i].types) {
                  case "F3999":
                    this.quarterInsMtnData[i].datas = qF3999;
                    break;
                  case "F4000":
                    this.quarterInsMtnData[i].datas = qF4000;
                    break;
                  case "S6500":
                    this.quarterInsMtnData[i].datas = qS6500;
                    break;
                  case "i100":
                    this.quarterInsMtnData[i].datas = qi100;
                    break;
                }
              }
              console.log(this.quarterInsMtnData);
              console.log(this.quarterTimeScope);
              console.log(this.quarterTypeScope);
              this.showLineSeason();
              break;
          }
        })
        .catch((err) => {
          console.log("仪器维护接口失败", err);
        });
    },
    //大区周、月、季维护接口
    regionMaintain(types) {
      regionMaintain({
        type: types,
      })
        .then((res) => {
          console.log("大区维护接口成功", res);
          switch (types) {
            case "W":
              this.weekAreaType = res.data.AreaNames;
              this.weekFinishData = res.data.FinishedList;
              this.weekUnfinishData = res.data.UnfinishedList;
              this.showBarBoxWeek();
              break;
            case "M":
              this.monthAreaType = res.data.AreaNames;
              this.monthFinishData = res.data.FinishedList;
              this.monthUnfinishData = res.data.UnfinishedList;
              this.showBarBoxMonth();
              break;
            case "Q":
              this.quarterAreaType = res.data.AreaNames;
              this.quarterFinishData = res.data.FinishedList;
              this.quarterUnfinishData = res.data.UnfinishedList;
              this.showBarBoxSeason();
              break;
          }
        })
        .catch((err) => {
          console.log("大区维护接口失败", err);
        });
    },
    //大区周、月、季未完成城市饼图接口
    unfinishedCity(types) {
      unfinishedCity({
        type: types,
        aName: "华东一区",
      })
        .then((res) => {
          console.log("大区维护未完成城市接口成功", res);
          switch (types) {
            case "W":
              this.weekUnfinishCity = res.data;
              this.showPieWeek();
              break;
            case "M":
              this.monthUnfinishCity = res.data;
              this.showPieMonth();
              break;
            case "Q":
              this.quarterUnfinishCity = res.data;
              this.showPieSeason();
              break;
          }
        })
        .catch((err) => {
          console.log("大区维护未完成城市接口失败", err);
        });
    },

    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644", border: "0.1rem solid #945987" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    },

    showBarChart() {
      var barBox = document.getElementById("barBox");
      var myBarEchart = this.$echarts.init(barBox, "tellgenChart");
      var option = {
        tooltip: {
          textStyle: {
            fontSize: "1rem",
          },
        },
        xAxis: {
          type: "category",
          data: this.weekTotalMtnType,
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.4rem",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.4rem",
          },
        },

        series: [
          {
            data: this.weekTotalMtnData,
            type: "bar",
            showBackground: true,
            color: ["#3ebcef", "#d48265", "#91c7ae"],
            backgroundStyle: {
              color: "rgba(16,15,31,1)",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.8rem",
            },
            labelLine: {
              show: true,
            },
          },
        ],

        grid: {
          left: "15%",
          right: "6%",
          bottom: "10%",
          top: "6%",
        },
      };
      myBarEchart.setOption(option);
      window.resize = myBarEchart.resize;
    },
    showLineWeek() {
      var lineBoxWeek = document.getElementById("lineBoxWeek");
      var lineWeek = this.$echarts.init(lineBoxWeek, "tellgenChart");
      var option;
      var seriesData = [];
      for (var i = 0; i < this.insMtnData.length; i++) {
        seriesData.push({
          name: this.insMtnData[i].types,
          type: "line",
          stack: "总量",
          data: this.insMtnData[i].datas, //3
        });
      }
      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        legend: {
          data: this.typeScope, //1
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "4%",
          top: "14%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.timeScope, //2
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "value",
          data: {
            textStyle: {
              fontSize: 20,
            },
          },
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },

        series: seriesData,
      };
      option && lineWeek.setOption(option);
      window.onresize = lineWeek.resize;
    },
    showLineMonth() {
      var lineBoxWeek = document.getElementById("lineBoxMonth");
      var lineWeek = this.$echarts.init(lineBoxWeek, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.monthInsMtnData.length; i++) {
        tempData.push({
          name: this.monthInsMtnData[i].types,
          type: "line",
          stack: "总量",
          data: this.monthInsMtnData[i].datas,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        legend: {
          data: this.monthTypeScope,
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "4%",
          top: "14%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.monthTimeScope,
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "value",
          data: {
            textStyle: {
              fontSize: 20,
            },
          },
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        series: tempData,
      };
      option && lineWeek.setOption(option);
      window.onresize = lineWeek.resize;
    },
    showLineSeason() {
      var lineBoxWeek = document.getElementById("lineBoxSeason");
      var lineWeek = this.$echarts.init(lineBoxWeek, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.quarterInsMtnData.length; i++) {
        tempData.push({
          name: this.quarterInsMtnData[i].types,
          type: "line",
          stack: "总量",
          data: this.quarterInsMtnData[i].datas,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        // monthTimeScope: [],
        // monthInsMtnData: [],
        // monthTypeScope: [],
        legend: {
          data: this.quarterTypeScope,
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "4%",
          top: "14%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.quarterTimeScope,
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "value",
          data: {
            textStyle: {
              fontSize: 20,
            },
          },
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        series: tempData,
      };
      option && lineWeek.setOption(option);
      window.onresize = lineWeek.resize;
    },
    showBarBoxWeek() {
      var barBoxWeek = document.getElementById("barBoxWeek");
      var myBarEchart = this.$echarts.init(barBoxWeek, "tellgenChart");
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        grid: {
          show: true,
          left: "10%",
          right: "10%",
          bottom: 28,
          shadowColor: "#191931",
          borderWidth: 0,
        },
        legend: {
          data: ["已完成", "未完成"],
          left: 20,
          top: 5,
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   },
        //   right: 20,
        //   top: 0
        // },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.weekAreaType, //1
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        series: [
          {
            name: "已完成",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#11101E",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.2rem",
            },
            data: this.weekFinishData, //2
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" },
            //   ],
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "未完成",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#11101e",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.2rem",
            },
            data: this.weekUnfinishData, //3
            // markPoint: {
            //   data: [
            //     { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
            //     { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
            //   ],
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };

      option && myBarEchart.setOption(option);
      window.onresize = myBarEchart.resize;
    },
    showBarBoxMonth() {
      var barBoxWeek = document.getElementById("barBoxMonth");
      var myBarEchart = this.$echarts.init(barBoxWeek, "tellgenChart");
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: 28,
        },
        legend: {
          data: ["已完成", "未完成"],
          left: 20,
          top: 5,
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          right: 20,
          top: 0,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.monthAreaType,
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        series: [
          {
            name: "已完成",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#11101E",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.2rem",
            },
            data: this.monthFinishData,
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" },
            //   ],
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "未完成",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#11101e",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.2rem",
            },
            data: this.monthUnfinishData,
            // markPoint: {
            //   data: [
            //     { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
            //     { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
            //   ]
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };

      option && myBarEchart.setOption(option);
      window.onresize = myBarEchart.resize;
    },
    showBarBoxSeason() {
      var barBoxWeek = document.getElementById("barBoxSeason");
      var myBarEchart = this.$echarts.init(barBoxWeek, "tellgenChart");
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: 28,
        },
        legend: {
          data: ["已完成", "未完成"],
          left: 20,
          top: 5,
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          right: 20,
          top: 0,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.quarterAreaType,
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        series: [
          {
            name: "已完成",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#11101E",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.2rem",
            },
            data: this.quarterFinishData,
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" },
            //   ],
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "未完成",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#11101e",
            },
            label: {
              show: true,
              position: "top",
              fontSize: "1.2rem",
            },
            data: this.quarterUnfinishData,
            markPoint: {
              data: [
                { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };

      option && myBarEchart.setOption(option);
      window.onresize = myBarEchart.resize;
    },
    showPieWeek() {
      var pieBoxWeek = document.getElementById("pieBoxWeek");
      var pieChartWeek = this.$echarts.init(pieBoxWeek, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.weekUnfinishCity.length; i++) {
        tempData.push({
          name: this.weekUnfinishCity[i].City,
          value: this.weekUnfinishCity[i].Unfinished,
        });
      }
      var option;
      option = {
        toolbox: {
          width: "60rem",
          height: "10rem",
        },
        tooltip: {
          trigger: "item",
          borderWidth: 1.6,
          width: "60rem",
          height: "2rem",
          textStyle: {
            fontSize: "1rem",
          },
        },
        // legend: {
        //   orient: "center",
        //   left: "right"
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "66%",
            top: 13,
            label: {
              fontSize: "1.2rem",
            },
            data: tempData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && pieChartWeek.setOption(option);
      window.onresize = pieChartWeek.resize;
    },
    showPieMonth() {
      var pieBoxMonth = document.getElementById("pieBoxMonth");
      var pieChartWeek = this.$echarts.init(pieBoxMonth, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.monthUnfinishCity.length; i++) {
        tempData.push({
          name: this.monthUnfinishCity[i].City,
          value: this.monthUnfinishCity[i].Unfinished,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: "1rem",
          },
        },
        // legend: {
        //   orient: "center",
        //   left: "right"
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "66%",
            top: 13,
            label: {
              fontSize: "1.2rem",
            },
            data: tempData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && pieChartWeek.setOption(option);
      window.onresize = pieChartWeek.resize;
    },
    showPieSeason() {
      var pieBoxSeason = document.getElementById("pieBoxSeason");
      var pieChartWeek = this.$echarts.init(pieBoxSeason, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.quarterUnfinishCity.length; i++) {
        tempData.push({
          name: this.quarterUnfinishCity[i].City,
          value: this.quarterUnfinishCity[i].Unfinished,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: "1rem",
          },
        },
        // legend: {
        //   orient: "center",
        //   left: "right"
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "66%",
            top: 13,
            label: {
              fontSize: "1.2rem",
            },
            data: tempData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && pieChartWeek.setOption(option);
      window.onresize = pieChartWeek.resize;
    },
  },
};
</script>
<style lang="scss" scoped>
body {
  .mainContent {
    width: 100%;
    height: 101.5rem; //改代码需要自适应
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: row;
    // padding-left: 2rem;
    // padding-right: 2rem;
    .baseBox {
      flex: 1;
      margin-right: 2rem;
      display: flex;
      display: -webkit-flex; /* Safari */
      flex-direction: column;
      .TopContents {
        flex: 3.1;
        background-color: #191931;
        margin-bottom: 1.4rem;
        border-radius: 1.4rem;
        border: 0.1rem solid #232341;
        .lineBaseBox {
          width: 100%;
          height: 23rem;
        }
      }
      .bottomContents {
        flex: 5;
        background-color: #191931;
        border-radius: 1.4rem;
        border: 0.1rem solid #232341;
        .barBaseBox {
          width: 100%;
          height: 32.5rem;
        }
        .pieBaseBox {
          width: 100%;
          height: 23rem;
        }
      }
    }
    .total {
      flex: 1;
      margin-right: 2rem;
      margin-left: 2rem;
      display: flex;
      display: -webkit-flex; /* Safari */
      flex-direction: column;

      .baseTotal {
        border-radius: 1.4rem;
        border: 0.1rem solid #232341;
      }
      .totalTop {
        flex: 5;
        background-color: #191931;
        margin-bottom: 1.4rem;
        border: 0.1rem solid #232341;
        .barBox {
          width: 100%;
          height: 43.5rem;
          // background-color: rgb(29, 43, 38);
        }
      }
      .totalBottom {
        flex: 3.5;
        background-color: #191931;
        padding: 0 2rem 2rem 2rem;
        .tableBox {
          width: 100%;
          height: 34.5rem;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
